<template>
  <div class="leftcahrt1">
    <div class="left_icon font_color">MAC-11001100000000</div>
    <div class="title">来电狗大数据后台</div>
    <div class="right_icon font_color">
      <div class="currentTime">
        {{ currentTime }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: '',
    }
  },
  mounted() {
    setInterval(() => {
      this.getUpdate()
    }, 1000)
  },
  methods: {
    getUpdate() {
      const now = new Date();
      this.currentTime = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.toLocaleTimeString();
    }
  }
}
</script>

<style scoped lang="scss">
.leftcahrt1 {
  height: 95px;
  position: relative;

  .left_icon {
    margin-top: 20px;
    width: 22%;
    height: 32px;
    background-image: url("../assets/images/right_icon.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    padding: 9px 30px;
  }

  .title {
    width: calc(100% - 40%);
    height: 114px;
    line-height: 114px;
    background-image: url("../assets/images/title_bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-weight: 400;
    font-size: 31px;
    color: #23CEFD;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .right_icon {
    margin-top: 20px;
    width: 25%;
    height: 32px;
    background-image: url("../assets/images/left_icon.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    padding: 9px 0px 9px;

    .currentTime {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 100px;
    }
  }
}

.font_color {
  color: #23CEFD;
  font-size: 16px;
}
</style>
